<template>

    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 备份恢复</h2>
    </div>

    <div class="wrapper-md">
        <div class="tab-container">
        <tabset>
            <tab header="备份数据">
                <div class="no-borders pull-in m-b-none wrapper-md">
                    <form name="data" novalidate class="form">
                        <div class="form-group row">
                            <label class="wrap-title col-md-1 control-label">时间范围:</label>
                            <div class="form-control1 col-md-3">
                                <date-range-picker :picker-value.sync="entry.myDate" :min-date="daterange.minDate" :max-date="daterange.maxDate" :placeholder="daterange.placeholder" :disable="daterange.disable" :apply-label="daterange.apply" :apply-class="daterange.applyClass" :cancel-label="daterange.cancel"></date-range-picker>
                            </div>
                            <div class="col-md-1 text-center">
                                <button type="button" @click="queryParams()" class="btn btn-dark">
                                    <i class="fa fa-search"></i>查询
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </tab>
            <tab header="备份设置">
                <ul class="no-borders pull-in m-b-none wrapper-md bk-items-list" style="padding-left: 50px;">

                    <li class="row">
                        <div class="bk-item-name col-md-2">保留天数:</div><div class="col-md-8">7</div>
                    </li>
                    <li class="row">
                        <div class="bk-item-name col-md-2">备份周期:</div><div class="col-md-8">星期一,星期二,星期三</div>
                    </li>
                    <li class="row">
                        <div class="bk-item-name col-md-2">备份时间:</div><div class="col-md-8">20:00-21:00</div>
                    </li>
                    <li class="row">
                        <div class="bk-item-name col-md-2">预计下次备份时间:</div><div class="col-md-8">2016-09-25 20:16:00</div>
                    </li>

                </ul>
                <div class="row">
                    <div class="col-md-2 text-center m-t-lg">
                        <button type="button" class="btn btn-dark btn-sm">
                            <i class="fa fa-pencil"></i>编辑
                        </button>
                    </div>
                </div>
            </tab>
        </tabset>
        </div>
    </div>

</template>
<style>
    .nav-tabs{
        margin-bottom: 0 !important;
    }
</style>
<script>

    require("../../resources/vendor/lib/daterangepicker/daterangepicker.css")

    import daterangepicker from "../../resources/components/daterangepicker.vue"
    import VueStrap from 'vue-strap'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}

            return {        //必须使用这样的形式，才能创建出单一的作用域
                entry: {
                    neicun: null,
                    myDate: null
                },
                daterange: {
                    apply: '确认',
                    cancel: '取消',
                    placeholder: '2016-01-01 - 2016-09-16',
                    disable: false,
                    startDate: '',
                    endDate: '',
                    minDate: '2016-08-10',
                    maxDate: '2016-09-25',
                    applyClass: 'btn-dark'
                }
            }
        },
        created () {

        },
        ready () {

        },
        methods: {
            getDateRange () {
                console.log(this.entry.myDate);
            }
        },
        components: {
            "date-range-picker": daterangepicker,
            tab:VueStrap.tab,
            tabset:VueStrap.tabset
        },
        directives: {

        }
    }

</script>
